// 订车页面
<template>
  <div class="orderCar-wrapper">
    <!-- 顶部tarBar -->
    <van-nav-bar
      title="订车"
      left-arrow
      fixed
      @click-left="$router.go(-1)"
      class="animate__fadeInDown animate__animated"
    />
    <!-- 顶部tarBar -->
    <!-- 车图片和相关信息 -->
    <div class="details" v-if="goodsDetail.id">
      <div class="details-left">
        <img :src="goodsDetail.image" alt="" />
      </div>
      <div class="details-right">
        <div>
          {{ goodsDetail.name }}({{ goodsDetail.pai }}
          <i>...</i>
          <span>自</span>
        </div>
        <div>
          <span>{{ goodsDetail.property.split("-")[1] }} |</span>
          <span>{{ goodsDetail.property.split("-")[0] }} </span>
          <span v-if="goodsDetail.property.split('-').length == 3"
            >| {{ goodsDetail.property.split("-")[2] }}</span
          >
        </div>
      </div>
      <img
        class="details-img"
        src="../../assets/image/system-prompt.png"
        alt=""
      />
    </div>
    <!-- 车图片和相关信息 -->
    <!-- 地址相关信息 -->
    <div class="carPage">
      <div class="carPage-left">
        <div class="time">
          <span>{{ $store.state.address.date.get.day }}</span>
          <span>{{ $store.state.address.date.get.hour }}</span>
        </div>
        <div class="address">
          {{ $store.state.address.address.city }}-{{
            $store.state.address.address.area
          }}取车
          <span>...</span>
        </div>
        <div class="message">请在06:00-23:59内取车</div>
      </div>
      <div class="carPage-middle">
        <div class="time">{{ $store.state.address.timeDistance }}</div>
        <img src="../../assets/image/arrow.png" alt="" />
      </div>
      <div class="carPage-right">
        <div class="time">
          <span>{{ $store.state.address.date.also.day }}</span>
          <span>{{ $store.state.address.date.also.hour }}</span>
        </div>
        <div class="address">
          {{ $store.state.address.address.city }}-{{
            $store.state.address.address.area
          }}还车
          <span>...</span>
        </div>
        <div class="message">请在06:00-23:59内还车</div>
      </div>
    </div>
    <div class="home-activity" @click="show = true">
      <img src="../../assets/image/zhima.png" alt="" />
      <span
        >取车时，到店申请芝麻信用免押金<i class="iconfont icon-right"></i
      ></span>
    </div>
    <div class="distance"></div>
    <!-- 地址相关信息 -->
    <!-- 租车保障服务 -->
    <car-ensure @change="updateCarEnsureTotalPrice" />
    <!-- 租车保障服务 -->
    <div class="distance"></div>
    <!-- 租车相关问题 -->
    <problem-list />
    <!-- 租车相关问题 -->
    <!-- 同意用车服务协议 -->
    <div class="agreement">
      <i
        v-show="agreement"
        class="iconfont icon-31xuanzhong"
        @click="clickAgreement"
      ></i>
      <i
        v-show="!agreement"
        class="iconfont icon-weixuanzhong"
        @click="clickAgreement"
      ></i>
      <span>我已阅读并同意</span>
      <span class="pact">《用车服务协议》</span>
    </div>
    <!-- 同意用车服务协议 -->
    <!-- 取车时申请免押 -->
    <!-- 底部提交订单 -->
    <div class="submit">
      <div class="left">
        <span class="title">付款</span>
        <span class="price">￥{{ totalPrice }}</span>
        <span class="message">(含保险)</span>
      </div>
      <div class="right" :class="{ active: agreement }" @click="onsubmit">
        提交订单
      </div>
    </div>
    <!-- 底部提交订单 -->
    <van-popup
      v-model="show"
      position="center"
      class="no-deposit-popup"
      :style="{ width: '92%', height: '68%' }"
    >
      <no-deposit class="no-deposit" @clickKnow="show = false" />
    </van-popup>
    <!-- 取车时申请免押 -->
  </div>
</template>

<script>
import CarEnsure from "./components/CarEnsure.vue";
import ProblemList from "./components/ProblemList.vue";
import NoDeposit from "../../components/NoDeposit.vue";
import { getGoodsDetail } from "../../api/category";
import moment from "moment";

export default {
  components: { CarEnsure, ProblemList, NoDeposit },
  data() {
    return {
      show: false,
      // 是否是同意状态
      agreement: false,
      // 车辆保障服务费的和
      carEnsureTotalPrice: null,
      // 商品详情
      goodsDetail: {},
      // 订单数据
      order: {
        type: "progress", // 默认为进行中的订单
        orderNumber: "",
        time: "",
        getTime: "",
        alsoTime: "",
        address: "",
        image: "",
        name: "",
        model: "",
        finish: false, // 默认为待支付状态，支付后设置为true
        cancel: false, // 默认为已取消状态
      },
    };
  },

  computed: {
    // 总价格
    totalPrice() {
      return (
        this.carEnsureTotalPrice +
        this.goodsDetail.price *
          parseInt(this.$store.state.address.timeDistance)
      );
    },
  },

  methods: {
    clickAgreement() {
      this.agreement = !this.agreement;
    },
    // 点击提交按钮
    onsubmit() {
      if (this.agreement) {
        // 将总价保存到vuex
        this.$store.commit("order/changeTotalPrice", this.totalPrice);

        if (JSON.stringify(this.$store.state.order.progress) === "{}") {

          // 生成订单
          this.order.orderNumber =
            "2022" + Math.ceil(Math.random() * 100000 + 100000);

          this.order.time = moment().format("YYYY-MM-DD  HH:mm");

          this.order.getTime =
            this.$store.state.address.date.get.day +
            this.$store.state.address.date.get.hour;

          this.order.alsoTime =
            this.$store.state.address.date.also.day +
            this.$store.state.address.date.also.hour;

          this.order.address =
            this.$store.state.address.address.city +
            this.$store.state.address.address.area;

          this.order.image = this.goodsDetail.image;

          this.order.name = this.goodsDetail.name;

          this.order.model = this.goodsDetail.model;

          this.$store.commit("order/changeProgress", this.order);

          this.$router.push("/payCarRent");

        } else {
          this.$toast("您在同一时间内只能有1个订单，请完成后再预订新的车辆")
        }
        
      }
    },

    // 获取商品详情
    async localGoodsDetail(id) {
      try {
        this.$toast.loading("加载中");
        const res = await getGoodsDetail(id);
        this.goodsDetail = res.data.data;
        this.$toast.clear();
      } catch (error) {
        console.log(error);
      }
    },
    updateCarEnsureTotalPrice(val) {
      this.carEnsureTotalPrice = val;
    },
  },

  created() {
    this.localGoodsDetail(this.$route.query.id);
  },
};
</script>

<style lang="scss" scoped>
::v-deep.orderCar-wrapper {
  height: 569px;
  margin: 48px 0 50px 0;
  overflow-y: scroll;
  .van-nav-bar__content {
    border-bottom: 2px solid #ddd;
  }
  .details {
    display: flex;
    padding: 20px 15px;
    color: #282828;
    position: relative;
    border-bottom: 1px solid #f1f1f1;
    &-left {
      margin-left: 20px;
      img {
        width: 126px;
        height: 94.5px;
      }
    }
    &-right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      margin-left: 29px;
      div:nth-child(1) {
        font-size: 17px;
        margin-bottom: 8px;
        span {
          color: #52de98;
          border: 1px solid #94ecc2;
          font-size: 14px;
          padding: 0 2px;
          border-radius: 5px;
        }
      }
      div:nth-child(2) {
        font-size: 10px;
        color: #b9b9b9;
        span + span {
          margin-left: 3px;
        }
      }
    }
    &-img {
      width: 42px;
      height: 16px;
      position: absolute;
      top: 20;
      left: 15;
    }
  }
  .carPage {
    display: flex;
    justify-content: space-between;
    padding: 15px 15px 24px;
    &-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      .time {
        font-size: 14px;
        color: #262626;
        span:nth-child(1) {
          margin-right: 4px;
        }
      }
      .address {
        font-size: 14px;
        font-weight: 500;
        color: #444444;
        margin: 7px 0;
      }
      .message {
        font-size: 10px;
        color: #bcbcbc;
      }
    }
    &-middle {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      img {
        width: 65px;
      }
    }
    &-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      .time {
        font-size: 14px;
        color: #262626;
        span:nth-child(1) {
          margin-right: 4px;
        }
      }
      .address {
        font-size: 14px;
        font-weight: 500;
        color: #444444;
        margin: 7px 0;
      }
      .message {
        font-size: 10px;
        color: #bcbcbc;
      }
    }
  }
  .home-activity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 88%;
    height: 18px;
    margin: 0 auto 20px;
    padding: 15px 10px;
    background: #f2f9ff;
    border-radius: 10px;
    img {
      width: 65px;
      height: 19px;
    }
    span {
      color: #1677ff;
      font-size: 10px;
      line-height: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        color: #1677ff;
        font-weight: 700;
      }
    }
  }
  .distance {
    width: 100%;
    height: 20px;
    background-color: #f6f6f9;
  }
  .agreement {
    background-color: #f5f5f5;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 74px;
    padding-left: 15px;
    .iconfont {
      margin-right: 5px;
    }
    .icon-31xuanzhong {
      color: #ff3838;
    }
    span {
      font-size: 14px;
    }
    .pact {
      color: #0071ff;
    }
  }
  .submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid rgb(231, 231, 231);
    .left {
      padding-left: 15px;
      .title {
        font-size: 15px;
        font-weight: 700;
      }
      .price {
        font-size: 15px;
        font-weight: 700;
        color: rgb(238, 58, 58);
      }
      .message {
        font-size: 14px;
        color: #a4a3a2;
        margin-left: 5px;
      }
    }
    .right {
      width: 131px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: rgb(240, 239, 239);
      color: white;
    }
    .active {
      background-color: #ed423c;
    }
  }
}
</style>